<template>
    <div class="group relative w-[240px] mx-5 my-8 transition-all duration-300">
        <div
            class="relative w-full overflow-hidden transition-all duration-300 bg-white rounded-lg shadow-md cursor-pointer card-transition h-80">
            <img :src="img"
                class="object-cover w-full h-full transition-transform duration-300 ease-in-out group-hover:scale-110"
                alt="Movie">

            <!-- 信息层 -->
            <div
                class="absolute inset-x-0 bottom-0 px-4 pb-4 text-white transition-all duration-300 delay-75 translate-y-full opacity-0 card-info-gradient group-hover:opacity-100 group-hover:translate-y-0">
                <h3 class="text-lg font-bold">{{ name }}</h3>
                <p class="text-sm" v-if="score">评分：{{ score.toFixed(1) }}</p>
                <p class="text-sm">类型：<span v-for="(item, index) in types">{{ item }}
                    <span v-if="index !== types.length - 1"> / </span></span></p>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
    name: string
    img: string
    score?: number
    types: string[]
}>()
</script>

<style lang="scss" scoped>
/* 自定义渐变层和动画 */

.card-info-gradient {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.card-transition {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
</style>
